<template>
    <div>
      <!-- 物料 -->
      <el-row>
          <el-col :span="10" :offset="7">
            <template>
              物料：<el-select v-model="material" placeholder="请选择物料" @change="change_material()">
                <el-option
                  v-for="item in baseVO.materials"
                  :key="item.type"
                  :label="item.type"
                  :value="item.type">
                </el-option>
              </el-select>
            </template>
          </el-col>
      </el-row>
      <!-- 品质 -->
      <el-row>
          <el-col :span="10" :offset="7">
            <template>
              品质：<el-select v-model="purity" placeholder="请选择品质">
                <el-option
                  v-for="item in purities"
                  :key="item.purity"
                  :label="item.purity"
                  :value="item.purity">
                </el-option>
              </el-select>
            </template>
          </el-col>
      </el-row>  
      <!-- 区域 -->
      <el-row>
          <el-col :span="10" :offset="7">
            <template>
              区域：<el-select v-model="area" placeholder="请选择区域" @change="change_area()">
                <el-option
                  v-for="item in baseVO.areas"
                  :key="item.area"
                  :label="item.area"
                  :value="item.area">
                </el-option>
              </el-select>
            </template>
          </el-col>
      </el-row>
      
      <!-- 产线 -->
      <el-row>
          <el-col :span="10" :offset="7">
            <template>
              产线：<el-select v-model="productLine" placeholder="请选择产线">
                <el-option
                  v-for="item in productLines"
                  :key="item.producter"
                  :label="item.producter"
                  :value="item.producter">
                </el-option>
              </el-select>
            </template>
          </el-col>
      </el-row>
      
      <!-- 品类 -->
      <el-row>
          <el-col :span="10" :offset="7">
            <template>
              品类：<el-select v-model="category" placeholder="请选择品类">
                <el-option
                  v-for="item in baseVO.categories"
                  :key="item.type"
                  :label="item.type"
                  :value="item.type">
                </el-option>
              </el-select>
            </template>
          </el-col>
      </el-row>
      
      <el-button type="success" @click="add()">确认</el-button>
    </div>
  </template>
  <script>
  export default{
    data(){
      return{
        area:"",
        productLine:"",
        productLines:[],
        material:"",
        purity:"",
        purities:[],
        category:"",
        baseVO:null,
      }
    },
    mounted: function(){
      
      this.$axios.get("/base/allBase").then(res =>{
        this.baseVO = res.data.data;
      })
    },
    methods:{
      change_material: function(){
        
        this.purity = ""
        
        for (const item of this.baseVO.materials) {
          if(this.material == item.type) {
            this.purities = item.purities
            return
          }
        }
      },
      change_area: function(){
        this.productLine = ""
        //
        for (const item of this.baseVO.areas) {
          if(this.area == item.area){
            this.productLines = item.productLines
            return
          }
        }
      },
      add: function(){
        // 封装数据
        let data = {
          material: this.material,
          purity: this.purity,
          area: this.area,
          productLine: this.productLine,
          category: this.category
        }
        
        this.$emit("getBase", data)
      }
    }
  }
  </script>
  <style scoped>
  
  </style>